<template>
  <div id="BigBox">
    <div id="box111" v-if="IfHaveXiYi"></div>
<!--    <el-row>-->
<!--      <el-col :span="24" style="background-color: #001529;height: 50px;line-height: 50px;color: #FFF;font-weight: 700;font-size: 20px;">-->
<!--        <el-button type="primary" icon="el-icon-user" circle style="margin-left: 1%;"></el-button>-->
<!--        <span style="margin-left: 10px;">智慧物业管理系统</span>-->
<!--        <el-dropdown trigger="click" style="float: right;">-->
<!--          <span class="el-dropdown-link">-->
<!--            <el-avatar shape="circle" :size="30" :src="url" class="avatar"></el-avatar>-->
<!--            <span style="float: left;font-size: 12px;font-weight: 100;margin-left: 10px;color: #FFF;">{{userName}}</span>-->
<!--          </span>-->
<!--          <el-dropdown-menu slot="dropdown" style="margin-right: 5%;width: 100px;text-align: center;">-->
<!--            <router-link :to='{path:"/userInfo"}' style="text-decoration: none;">-->
<!--              <el-dropdown-item class="clearfix">-->
<!--                <i class="el-icon-user"></i>-->
<!--                <span style="color: #606266;">个人中心</span>-->
<!--              </el-dropdown-item>-->
<!--            </router-link>-->
<!--            <router-link :to='{path:"/village"}' @click="switchs" style="text-decoration: none;">-->
<!--              <el-dropdown-item class="clearfix">-->
<!--                <i class="el-icon-refresh"></i>-->
<!--                <span style="color: #606266;">切换小区</span>-->
<!--              </el-dropdown-item>-->
<!--            </router-link>-->
<!--            <div @click="outLogin">-->
<!--              <el-dropdown-item class="clearfix">-->
<!--                <i class="el-icon-s-operation"></i>-->
<!--                <el-link :underline="false">退出系统</el-link>-->
<!--              </el-dropdown-item>-->
<!--            </div>-->
<!--          </el-dropdown-menu>-->
<!--        </el-dropdown>-->
<!--        <el-badge :value="5" class="item">-->
<!--          <i class="el-icon-bell"></i>-->
<!--        </el-badge>-->
<!--      </el-col>-->
<!--    </el-row>-->
    <el-row>
      <el-col :span="24">
        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1"><i class="el-icon-user"></i>智慧物业管理系统</el-menu-item>
          <el-submenu style="margin-left: 1535px" index="2">
            <template slot="title">
              <span><el-avatar :size="size" :src="circleUrl"></el-avatar></span>
              <span style="margin-left: 20px">测试名称</span>
            </template>
            <el-menu-item><p class="MinSpan">个人信息</p></el-menu-item>
            <el-menu-item><p class="MinSpan">退出登录</p></el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="3" style="height: 905px;border-right: 1px solid lightgray">
        <el-menu
            style="border-right: 0px"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            router
            @close="handleClose">
<!--          <el-menu-item index="5">-->
<!--            <span slot="title">菜单列表</span>-->
<!--          </el-menu-item>-->
          <!--   停车场管理     -->
          <el-submenu index="停车场管理">
            <template slot="title" index="0">
              <span>停车场管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="area">区域管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <el-menu-item index="carport">车位管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="vehicle">车辆管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="monthCard">月卡管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="payFees">缴费管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!--    收费管理      -->
          <el-submenu index="收费管理">
            <template slot="title" index="0">
              <span>收费管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="bill">账单管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="charge">收费项目管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="reporting">抄表周期管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="instrument">仪表管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="车位审批">
            <template slot="title" index="0">
              <span>车位审批</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="approver">审批中</el-menu-item>
              <el-menu-item index="passApprover">审批通过</el-menu-item>
              <el-menu-item index="rejectApprover">审批驳回</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="工作台">
            <template slot="title" index="0">
              <span>工作台</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/workbench">工作台</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="资料管理">
            <template slot="title" index="0">
              <span>资料管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/building">楼栋管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/unit">单元管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/house">房屋管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/locker">储物室</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/household">住户管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
<!--          <el-submenu index="论坛管理">-->
<!--            <template slot="title" index="0">-->
<!--              <span>论坛管理</span>-->
<!--            </template>-->
<!--            <el-menu-item-group>-->
<!--              <el-menu-item index="textVue">测试页面</el-menu-item>-->
<!--            </el-menu-item-group>-->
<!--          </el-submenu>-->
          <el-submenu index="2">
            <template slot="title" index="0">
              <span>设备管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="FacilityPublic">公共设备管理</el-menu-item>
              <el-menu-item index="FacilityClassify">设备分类管理</el-menu-item>
              <el-menu-item index="FacilityMaintainer">设备维修记录管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title" index="0">
              <span>系统设置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="Menu">菜单管理页面</el-menu-item>
<!--              <el-menu-item index="textVue">住户标签管理</el-menu-item>-->
              <el-menu-item index="ComplaintType">投诉类型管理</el-menu-item>
              <el-menu-item index="Slideshow">轮播图管理</el-menu-item>
              <el-menu-item index="Staffs">角色管理</el-menu-item>
              <el-menu-item index="DetailsLog">操作日志</el-menu-item>
              <el-menu-item index="Message">消息通知</el-menu-item>
              <el-menu-item index="posts">帖子管理</el-menu-item>
              <el-menu-item index="report">举报管理</el-menu-item>
              <el-menu-item index="comment">评论管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="物业服务">
            <template slot="title" index="0">
              <span>物业服务</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="ReportForRepair">报修管理</el-menu-item>
              <el-menu-item index="Visit">访客管理</el-menu-item>
              <el-menu-item index="Activity">活动管理</el-menu-item>
              <el-menu-item index="Notice">公告管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="21" style="height: 800px;">
        <div style="width: 100%;height: 820px;">
          <router-view></router-view>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      size:35,
      circleUrl:'',
      IfHaveXiYi: false,
    }
  },
  mounted () {
  },
  methods: {
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    },
    handleOpen (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    }
  }
}
</script>

<style>
.liBU{
  text-align: center
}
#BigBox{
  overflow:visible
}
.myInput{
  width: 200px;
}
*{
  margin: 0;
  padding: 0;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.avatar {
  width: 102px;
  height: 102px;
  display: block;
}
.good-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.good-uploader .el-upload:hover {
  border-color: #409EFF;
}
.good-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #CCC;
}
</style>
